<template>
  <div class="movie-container">
    <h3>Movie 组件 {{ $route.params.id }}---{{ id }}</h3>
    <!-- 在vue实例 this.$route.params中就可以找到路由传入的参数了 -->
    <!-- this.$route  是路由的参数对象 -->
    <!-- this.$router 是路由的导航对象 -->
    <!-- id存在于props中 -->
    <button @click="showThis()">打印this</button>
  </div>
</template>

<script>
export default {
  name: "Movie",
  props: ["id"],
  methods: {
    showThis() {
      console.log(this);
    },
  },
};
</script>

<style lang="less" scoped>
.movie-container {
  min-height: 200px;
  background-color: lightsalmon;
  padding: 15px;
}
</style>
